<template>
  <div>
    <div class="index container">
      <div class="left-partial">
        <font class="center" style="font-size: 1.25vw">公告</font>
        <ul
          class="infinite-list"
          v-infinite-scroll="load"
          style="overflow: auto"
        >
          <li
            v-for="(announce, i) in announces"
            class="infinite-list-item"
            :key="i"
            @click="showDetail(announce)"
          >
            <img src="../../../asset/images/announce.png" style="height: 1vw" />
            <div style="margin-left: 0.5vw; display: inline-flex">
              {{ announce.title }}
            </div>
          </li>
        </ul>
      </div>

      <div class="right-partial">
        <div class="partial-title">推荐阅读</div>
        <el-row>
          <el-col
            :span="5"
            v-for="(book, i) in books"
            :key="i"
            :offset="(i)%4 == 0  ? 0 : 1"
            :style="{marginTop:(i+1)/4>1?'0.875vw':'0'}"
          >
            <el-card>
              <img :src="baseImgurl + book.coverImgUrl" />
              <div style="display: grid">
                <span class="card-item">书名：《{{ book.name }}》</span>
                <span class="card-item"> 作者：{{ book.author }}</span>
                <span class="card-item"
                  >出版社：{{ book.publishingHouse }}</span
                >
                <span class="card-item">ISBN：{{ book.isbn }}</span>
                 <span class="card-item">价格：{{ book.price }}</span>
                 <span class="card-item">书架位置：{{ book.position }}</span>
                <span class="card-item right" :style="{color:book.lended==1?'red':'blue'}">
                  {{ book.lended == 1 ? "已借出":"可租借" }}
                </span>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="middle-container">
      <div class="search-container">
        <el-select v-model="select" placeholder="请选择">
          <el-option label="书名" value="name"></el-option>
          <el-option label="出版社" value="publishingHouse"></el-option>
          <el-option label="ISBN" value="isbn"></el-option>
          <el-option label="内容描述" value="description"></el-option>
        </el-select>
        <el-input
          placeholder="请输入内容"
          v-model="searchField"
          class="input-with-select"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="goSearch()"
          ></el-button>
        </el-input>
      </div>
    </div>
    <el-dialog
      :title="announce.title"
      :visible.sync="announceVisible"
      width="60%"
    >
      <div v-html="announce.content" class="announce-content"></div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    let baseImgurl = window.location.origin;
    return {
      baseImgurl,
      select: "name",
      searchField: "",
      pageNo: 1,
      pageSize: 20,
      hasNextPage: false,
      announceVisible: false,
      announces: [],
      announce: {},
      books: [],
    };
  },
  methods: {
    goSearch() {
      this.$cookies.set('select',this.select);
      this.$cookies.set('searchField',this.searchField);
      location.href = `/books`;
    },
    load() {
      if (this.hasNextPage) {
        this.pageNo += 1;
        this.getAnnounce();
      }
    },
    getAnnounce() {
      let that = this;
      let query = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      };
      query[this.select] = this.searchField;
      let queryStr = this.$query.stringify(query);
      this.$axios.get(`/api/v1/announces?${queryStr}`).then((data) => {
        that.total = data.totalCount;
        that.pageNo = data.pageNo;
        that.hasNextPage = data.hasNextPage;
        that.announces = that.announces.concat(data.announces);
      });
    },
    showDetail(item) {
      this.announce = item;
      this.announceVisible = true;
    },
    getReconnmended(pageNo) {
      let query = {
        pageNo,
        pageSize: 8,
      };
      query.recommended = 1;
      this.getBooks(query);
    },
    getBooks(query) {
      let that = this;
      let queryStr = this.$query.stringify(query);
      this.$axios.get(`/api/v1/books?${queryStr}`).then((data) => {
        that.books = data.books;
      });
    },
  },
  computed: {},
  mounted() {
    this.getAnnounce();
    this.getReconnmended();
  },
};
</script>

<style>
.el-card__body {
  padding: 0.875vw !important;
}

.el-card__body img {
  width: 5.2vw;
  height: 6.8vw;
}

.card-item{
  width: 100%;
  margin-top: 0.292vw;
}

.card-item.right{
  margin-left: 80%;
}
.el-dialog__header {
  border-bottom: 1px solid black;
}
.infinite-list {
  text-align: left;
}

.infinite-list-item {
  text-align: left;
  margin-top: 0.875vw;
  cursor: pointer;
}
.announce-content img {
  display: block;
  margin: 1vw auto;
}
</style>
